<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>百度地图</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=54wC2NlZBgqkxVmsK9VQnQh7ixb7NwQH">
    </script>
    <style type="text/css">  
        html{height:100%}    
        body{height:100%;margin:0px;padding:0px}    
        #container{
            height:100%;
            position: fixed;
            left: 0;
            top: 0;
        }    
    </style> 
</head>
<body>
    <div style="position: absolute;left: 0; top: 0;z-index: 9999;"><button id="EARTH">地球模式</button>
        <button id="normal">普通模式</button>
    </div>
    <div id="container"></div> 
    
</body>
<script>
    //bad09ba7912a718dd122368c56bdaad7
var map = new BMapGL.Map("container");
//初始化地图
var point = new BMapGL.Point(114.360794, 30.541193);
//设置地图的中心点
map.centerAndZoom(point, 15); 
map.enableScrollWheelZoom(true);   
// map.setHeading(0);   //设置地图旋转角度
// map.setTilt(73);       //设置地图的倾斜角度

var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

// var point1 = new BMapGL.Point(114.360794, 30.541193);
  
// var marker1 = new BMapGL.Marker(point1);        // 创建标注   
// map.addOverlay(marker1);                     // 将标注添加到地图中

var point2 = new BMapGL.Point(114.370794, 30.581193);
  
var marker2 = new BMapGL.Marker(point2);        // 创建标注   
map.addOverlay(marker2);                     // 将标注添加到地图中
// map.setMapStyleV2({     
//   styleId: 'bad09ba7912a718dd122368c56bdaad7'
// });

// var myIcon = new BMapGL.Icon("https://i.52112.com/icon/jpg/256/20210423/116308/4662171.jpg", new BMapGL.Size(80, 80));     
//     // 创建标注对象并添加到地图  
// var marker3 = new BMapGL.Marker(point, {icon: myIcon});
// marker3.addEventListener("click", function(){   
//     alert("您点击了标注");   
// });

// map.addOverlay(marker3); 


var polyline = new BMapGL.Polyline([
		new BMapGL.Point(114.360794, 30.581193),
		new BMapGL.Point(114.370794, 30.581193),
		new BMapGL.Point(114.370794, 30.571193),
        new BMapGL.Point(114.360794, 30.571193),
        new BMapGL.Point(114.360794, 30.581193),
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);


var point4 = new BMapGL.Point(114.360794, 30.581193);
    // 创建带高度的点
    var marker3d = new BMapGL.Marker3D(point4, 8000, {
        size: 50,
        shape: BMAP_SHAPE_CIRCLE,
        fillColor: '#454399',
        fillOpacity: 0.6
    });
    // 将点添加到地图上
    map.addOverlay(marker3d);


    var content = '武汉大学';
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,
    offset: new BMapGL.Size(10, 20)
})  
map.addOverlay(label);   
label.addEventListener("click",()=>{
    alert("欢迎访问武汉大学")
})                     // 将标注添加到地图中
label.setStyle({                              // 设置label的样式
    color: '#000',
    fontSize: '30px',
    border: '2px solid #1E90FF'
})

// var opts = {
//     width: 250,     // 信息窗口宽度
//     height: 100,    // 信息窗口高度
//     title: "标题"  // 信息窗口标题
// }
// var infoWindow = new BMapGL.InfoWindow("<button id='btn' onclick='show'>按钮</button>", opts);  // 创建信息窗口对象
// map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口


let  EARTHBtn = document.getElementById("EARTH");
let normalBtn = document.getElementById("normal")
EARTHBtn.onclick = function(){
    map.setMapType(BMAP_EARTH_MAP); 
}
normalBtn.onclick = function(){
    map.setMapType(BMAP_NORMAL_MAP); 
}

function createDOM(feature) {
    const img = document.createElement('img');
    img.style.height = '240px';
    img.style.width = '80px';
    img.src = 'https://bj.bcebos.com/v1/mapopen-pub-jsapigl/assets/images/fire.gif';
    img.draggable = false;
    return img;
}
  
// 创建自定义覆盖物
const customOverlay = new BMapGL.CustomOverlay(createDOM, {
    point,
    opacity: 0.5,
    map: map,
    offsetY: -10,
    properties: {
        title: 'this is a title',
        size: '100'
    }
});
  
// 将自定义覆盖物添加到地图上
map.addOverlay(customOverlay);
  
// 绑定鼠标事件
customOverlay.addEventListener('click', function (e) {
    alert("火被点击了")
});
// let btn = document.getElementById("btn");
// btn.onclick = function(){
//     alert("123")
// }
function show(){
    alert("123")
}


</script>
</html>